import React, { Component } from 'react';
import { NavBar, Form, Input, Button, Toast } from 'antd-mobile'
import '../../style/Register/Register.scss'
import service from '../../api';


class Register extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            tel: '',
            phoneValidator: ''
        }
    }
    componentDidMount(): void {
        this.setState({
            phoneValidator: (rule: any, value: string) => {
                if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
                    return Promise.resolve();
                } else {
                    return Promise.reject()
                }
            }
        })
    }
    async onFinsh(value: any) {
        console.log(value);
        var res = await service.user.docheckphone({ tel: value.name })
        console.log(res);
        if (res.data.code == 200) {
            this.props.history.push('/code')
        } else {
            Toast.show({
                icon: 'fail',
                content: '该用户已经被注册',
            })
        }

    }

    render() {
        return (
            <div className='register'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}>注册</NavBar>
                </div>

                <Form
                    onFinish={(value) => { this.onFinsh(value) }}
                    footer={
                        <Button block type='submit' color='danger' size='large' shape='rounded'>
                            下一步
                        </Button>
                    }
                >
                    <Form.Item
                        name='name'
                        rules={[{ required: true, message: '请输1-(3-9)的正确号码 ', validator: this.state.phoneValidator }]}
                    >
                        <Input clearable placeholder='请输入电话号' />
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default Register;